<template>
  <div>
    <div class="scroll-container">
      <!-- <my-video :sources="video.sources" :options="video.options"></my-video> -->
      <div ref="tag" class="scroll-wrap">
        <div class="goods" :class="{active:animate}" v-for="(item, i) in goodsList" :key="i">
          <span>{{ item.name }}</span>
          <span>{{ item.coupon }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      animate: false,
      intNum: undefined,
      goodsList: []
    };
  },

  props: {
    data: Array,
    time: String
  },
  mounted() {
    this.ScrollUp();

    const name = [
      "156****4579",
      "155****7846",
      "176****2355",
      "131****8784",
      "136****4548",
      "137****3244",
      "187****4683",
      "188****9635",
      "170****5670",
      "134****7833"
    ];
    const award = ["获得满399元减32.8", "获得3天svip体验"];
    this.handleData(name, award);
  },

  methods: {
    ScrollUp() {
      this.intNum = setInterval(() => {
        this.animate = true; // 向上滚动的时候需要添加css3过渡动画
        setTimeout(() => {
          this.goodsList.push(this.goodsList[0]); // 将数组的第一个元素添加到数组的
          this.goodsList.shift(); //删除数组的第一个元素
          this.animate = false;
        }, 500);
      }, 1500);
    },

    handleData(e, v) {
      let mathNum;
      for (let index = 0; index < 10; index++) {
        mathNum = parseInt(Math.random(0, 1) * 10);
        this.goodsList.push({ name: e[mathNum], coupon: v[Math.round(Math.random(0, 1))] });
      }
    }
  },

  components: {
    // myVideo
  }
};
</script>
<style lang="less" scoped>
.scroll-container {
  position: relative;
  font-size: 0.32rem;
}
p {
  margin: 0;
  // background: #fff;
}
.scroll-wrap {
  // width: 3rem;
  // position: absolute;
  height: 0.84rem;
  line-height: 0.32rem;

  font-size: 0.26rem;
  overflow: hidden;
  .goods {
    margin-top: 0.1rem;
    color: #fff;
  }
}
.active {
  transform: translateY(-0.42rem);
  transition: all 0.5s;
}
</style>


